<div class="row">
	<div id="breadcrumb" class="col-xs-12">
	<a href="#" class="show-sidebar">
						  <i class="fa fa-bars"></i>
						</a>
		<ol class="breadcrumb pull-left">
			<li><a href="index.html">首页</a></li>
			<li><a href="#">系统管理</a></li>
			<li><a href="#">用户管理</a></li>
		</ol>
	</div>
</div>       
            <div class="container-fluid">
                       <div class="row">
                    <div class="col-lg-12">
                    <div class="box ui-draggable ui-droppable">
				<div class="box-header">
					<div class="box-name">
						<i class="fa fa-coffee"></i> <span>用户管理</span>
					</div>
					<div class="box-icons">
						<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
						</a> <a class="expand-link"> <i class="fa fa-expand"></i>
						</a> <a class="close-link"> <i class="fa fa-times"></i>
						</a>
					</div>
					<div class="no-move"></div>
				</div>
				<div class="box-content">
				<button id="adduser" type="button" class="btn btn-primary">添加新用户</button>
					 <table id="grid-data" class="table table-condensed table-hover table-striped">
							        <thead>
							            <tr>
							                <th data-column-id="id" data-identifier="true" data-type="numeric">用户id</th>
							                <th data-column-id="username">用户名</th>
							                <th data-column-id="roles">拥有角色</th>
							                <th data-column-id="locked">是否锁定</th>
							                <th data-formatter="commands">操作</th>
							            </tr>
							        </thead>
							    </table>
                </div>
                            </div>
                        </div>
                    </div>
</div>
  <script type="text/javascript">
    $(document).ready(function(){
	    var grid=$("#grid-data").bootgrid({
	        ajaxSettings: {
		        method: "GET"
    		},
	    	navigation:2,
  			columnSelection:false,
		    ajax:true,
		    url:"/users",
		    formatters: {
		    "commands": function(column, row)
		    {
		            return "<button class=\"btn btn-xs btn-default ajax-link command-run1\" data-row-id=\"" + row.id + "\">修改</button>"+
		            "<button class=\"btn btn-xs btn-default ajax-link\" onclick=\"deleteuser("+row.id+")\" data-row-id=\"" + row.id + "\">删除</button>";
		    }
	    	}
	    
	    }).on("loaded.rs.jquery.bootgrid", function()
	    		{
	    	    grid.find(".command-run1").on("click", function(e)
	    	    {
	    	    	$("#userinfo").modal();
	    	    	var uid=$(this).data("row-id");
	    	    	$.get("/users/"+uid,function(data){
	    	    		$("#username2").val(data.username);
	    	    		var user_role=data.user_roles;
	    	    		var roles=[];
	    	    		for(var a=0;a<user_role.length;a++){
	    	    			var role=user_role[a].role.role;
	    	    			roles.push(role);
	    	    		}
	    	    		$.get("/allroles",function(a){
	    	    			$("#roles").html("");
	    	    			for(var m=0;m<a.length;m++){
	    	    				if(roles.indexOf(a[m].role)<0)
	    	    				$("#roles").append("<div class=\"checkbox-inline\"><label><input name='rolename[]' value="+a[m].roleid+" type=\"checkbox\">"+a[m].role+"<i class=\"fa fa-square-o\"></i></label></div>");
	    	    				else
	    	    				$("#roles").append("<div class=\"checkbox-inline\"><label><input name='rolename[]' value="+a[m].roleid+" type=\"checkbox\" checked=\"checked\">"+a[m].role+"<i class=\"fa fa-square-o\"></i></label></div>");
	    	    			}
	    	    			roles=[];
	    	    		});
	    	    		$("#updatebtn").click(function(){
		    	    		var checked =[];
					$('input[name="rolename[]"]:checked').each(function(){
						var temp={"role":{"roleid":$(this).val()}};
						checked.push(temp);
					});
	    		var json={"userid":uid,"locked":$("#locked").val(),"user_roles":checked};
	    		$.ajax({  
		        url : "/users/"+uid,  
		        type : "PUT",  
		        data : JSON.stringify(json), //转JSON字符串  
		        dataType: 'json',  
		        contentType:'application/json;charset=UTF-8', //contentType很重要
		        success : function(result) {
		        	alert("修改成功");
		        	LoadAjaxContent("useradmin");
		        	$("#userinfo").modal('hide');
		        	history.go(0);
		        }
		        });
		        checked =[];
		    	    		
		    	    	});
	    	    	});
	    	    	
	    	    });
	    
	    
	    });
	  });
	  
	 function deleteuser(uid){
	 	$.ajax({
	     type: 'DELETE',
	     url: "../users/"+uid ,
	     success:function(data) {  
	             if(data.state=="delete success"){
	             	alert("删除成功");
	             	LoadAjaxContent("useradmin");
	             }else{
	             	alert("您没有权限");
	             }
      	 }
		});
	 } 
	 
	  $(document).ready(function(){
	  	$("#adduser").click(function(){
	  		$("#insertmodal").modal();
	  		$.get("../allroles",function(a){
	    	    	$("#rolelist").html("");
	    	    	for(var m=0;m<a.length;m++){
	    	    		$("#rolelist").append("<div class=\"checkbox\"><label><input name='rolename[]' value="+a[m].roleid+" type=\"checkbox\">"+a[m].role+"<i class=\"fa fa-square-o\"></i></label></div>");
	    	    	}
	    	});
	    	
	  	});
	  	
	  	$("#addbtn").click(function(){
	    		if($("#addusername").val()=="")
	    		{
	    			alert("用户名不得为空");
	    			return false;
	    		}
	    		if($("#password").val()==""||$("#repeatpwd").val()==""){
	    			alert("密码不得为空");
	    			return false;
	    		}
	    		if($("#password").val()!=$("#repeatpwd").val()){
	    			alert("两次密码不一致");
	    			return false;
	    		}
	    		
	    		var checked =[];
					$('input[name="rolename[]"]:checked').each(function(){
						var temp={"role":{"roleid":$(this).val()}};
						checked.push(temp);
					});
	    		var json={"username":$("#addusername").val(),"password":$("#password").val(),"locked":false,
	    			"user_roles":checked};
	    		$.ajax({  
		        url : "../users",  
		        type : "POST",  
		        data : JSON.stringify(json), //转JSON字符串  
		        dataType: 'json',  
		        contentType:'application/json;charset=UTF-8', //contentType很重要
		        success : function(result) {
		        	alert("添加成功");
		        	LoadAjaxContent("useradmin");
		        	$("#insertmodal").modal('hide');
		        	history.go(0);
		        	//LoadAjaxContent("useradmin.html");
		        }
		        });
		        checked =[];
	    		
	    	});
	  	
	  });
	 
    </script>
<div id="userinfo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
      </div>
      <form class="form-horizontal" method="post">
      <div class="modal-body">
        	<div class="row form-group">
			    <label for="username2" class="col-sm-2 control-label">用户名</label>
			    <div class="col-sm-10">
			      <input type="text" name="username" class="form-control" id="username2" readonly="readonly">
			    </div>
        	</div>
        	<h4 class="page-header">拥有角色</h4>
        	<div class="row form-group">
					<div class="col-sm-12" id="roles">
					</div>
			</div>
			<div class="row form-group">
			    <label for="locked" class="col-sm-2 control-label">是否锁定</label>
			    <div class="col-sm-10">
			      <select name="locked" id="locked">
			      	<option value="false">否</option>
			      	<option value="true">是</option>
			      </select>
			    </div>
        	</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="updatebtn" class="btn btn-primary">保存</button>
      </div>
      </form>
    </div>
  </div>
</div>

<div id="insertmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">添加用户信息</h4>
      </div>
      <form class="form-horizontal" method="post">
      <div class="modal-body">
        	<div class="row form-group">
			    <label for="username" class="col-sm-2 control-label">用户名</label>
			    <div class="col-sm-10">
			      <input type="text" name="username" class="form-control" id="addusername">
			    </div>
        	</div>
        	<div class="row form-group">
			    <label for="password" class="col-sm-2 control-label">密码</label>
			    <div class="col-sm-10">
			      <input type="text" name="password" class="form-control" id="password">
			    </div>
        	</div>
        	<div class="row form-group">
			    <label for="repeatpwd" class="col-sm-2 control-label">重复密码</label>
			    <div class="col-sm-10">
			      <input type="text" name="repeatpwd" class="form-control" id="repeatpwd">
			    </div>
        	</div>
        	<h4 class="page-header">拥有角色</h4>
        	<div class="row form-group">
					<div class="col-sm-12" id="rolelist">
					</div>
			</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="addbtn" class="btn btn-primary">保存</button>
      </div>
      </form>
    </div>
  </div>
</div>